<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core"  prefix="c"%>
<!DOCTYPE HTML>
<html>
<head>
<title>Search-id</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords"
	content="Marital Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template, 
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
<script type="application/x-
javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<link href="css/bootstrap-3.1.1.min.css" rel='stylesheet'
	type='text/css' />
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- Custom Theme files -->
<link href="css/style.css" rel='stylesheet' type='text/css' />
<link href='https://fonts.googleapis.com/css?family=Oswald:300,400,700'
	rel='stylesheet' type='text/css'>
<link
	href='https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700'
	rel='stylesheet' type='text/css'>
<!----font-Awesome----->
<link href="css/font-awesome.css" rel="stylesheet">
<!----font-Awesome----->
<script>
$(document).ready(function(){
    $(".dropdown").hover(            
        function() {
            $('.dropdown-menu', this).stop( true, true ).slideDown("fast");
            $(this).toggleClass('open');        
        },
        function() {
            $('.dropdown-menu', this).stop( true, true ).slideUp("fast");
            $(this).toggleClass('open');       
        }
    );
});
</script>
</head>
<body>
	<!-- ============================  Navigation Start =========================== -->
	<div class="navbar navbar-inverse-blue navbar">
    <!--<div class="navbar navbar-inverse-blue navbar-fixed-top">-->
      <div class="navbar-inner navbar-inner_1">
        <div class="container">
           <div class="navigation">
             <nav id="colorNav">
			   <ul>
				<li class="green">
					<a href="#" class="icon-home"></a>
					<ul>
						<li><a href="/zzLoveProduct/login/login/login.jsp">登录</a></li>
					    <li><a href="/zzLoveProduct/register/register.jsp">注册</a></li>
					    <li><a href="/zzLoveProduct/login/login/login.jsp">退出</a></li>
					</ul>
				</li>
			   </ul>
             </nav>
           </div>
           <a class="brand" href="/zzLoveProduct/index/index.jsp"><img src="/zzLoveProduct/index/images/zzaq.png" alt="logo"style="width:150px"></a>
           <div class="pull-right">
          	<nav class="navbar nav_bottom" role="navigation">
 
		 <!-- Brand and toggle get grouped for better mobile display -->
		  <div class="navbar-header nav_2">
		      <button type="button" class="navbar-toggle collapsed navbar-toggle1" data-toggle="collapse" data-target="#bs-megadropdown-tabs">Menu
		        <span class="sr-only">Toggle navigation</span>
		        <span class="icon-bar"></span>
		        <span class="icon-bar"></span>
		        <span class="icon-bar"></span>
		      </button>
		      <a class="navbar-brand" href="#"></a>
		   </div> 
		   <!-- Collect the nav links, forms, and other content for toggling -->
		    <div class="collapse navbar-collapse" id="bs-megadropdown-tabs">
		        <ul class="nav navbar-nav nav_1">
		            <li><a href="/zzLoveProduct/index/index.jsp">主页</a></li>
		            <li><a href="/zzLoveProduct/HomeServlet">个人主页</a></li>
		    	    <li><a href="/zzLoveProduct/story/Pl_story.baihe.com_1/story.jsp">故事集</a></li>
		    	    <li><a href="/zzLoveProduct/match/match.jsp">心灵匹配</a></li>
		            <li class="last"><a href="/zzLoveProduct/search/Search.jsp">常规搜索</a></li>
		        </ul>
		     </div><!-- /.navbar-collapse -->
		    </nav>
		   </div> <!-- end pull-right -->
          <div class="clearfix"> </div>
        </div> <!-- end container -->
      </div> <!-- end navbar-inner -->
    </div> <!-- end navbar-inverse-blue -->
	<!-- ============================  Navigation End ============================ -->
	<div class="grid_3">
		<div class="container">
			<div class="breadcrumb1">
				<ul>

					<a href="index.html"><i class="fa fa-home home_1"></i></a>
					<span class="divider">&nbsp;|&nbsp;</span>
					<li class="current-page">通过用户名查询</li>
				</ul>
			</div>
			<script type="text/javascript">
							$(function(){
								$("#text").keyup(function(){
									$.ajax({
										url:"/zzLoveProduct/SearchByUsernameServalet",
										data:{
											"name":$("#text").val(),
										},
										success:function(data){
											$("#list").empty();
											for(var i=0;i<data.length;i++){
												if(i>7){
													break;
												}
												$("#list").append("<div style='cursor:pointer' onmouseover='over(this)' onmouseout='out(this)' onclick='go(this)'>"+data[i].username+"</div>");
											}
											$("#list").css("display","block");
										},
										dataType:"json",
										type:"POST",
										async:false
									});
								});
							})
							function over(obj){
								$(obj).css("background-color","gray");
							}
							function out(obj){
								$(obj).css("background-color","white");
							}
							function go(obj){
								$("#text").val($(obj).html());
								$("#list").css("display","none");
							}
							</script>
			<div class="col-md-9 profile_left">
				<form action="/zzLoveProduct/SearchByUsernameServlet2" method="post">
					<div class="form_but1">
						<label class="col-sm-5 control-lable1" for="sex">用户名: </label>
						<div class="col-sm-7 form_radios">
							<div class="input-group1">
							<input type="text" id="text" name="text">
							<div id="list" style="width: 450px;height: 150px;border: 1px:1px solid; gray;background-color: white;position: absolute;z-index:1000;display: none"></div>					
							</div>	
							<div class="input-group1">
							<input type="submit" value="开始搜索">
							</div>
						</div>
					</div>
					<div class="clearfix"></div>
			</div>
			</form>
 <div class="paid_people">
   <h1>搜索对象</h1>
  <c:if test="${!empty persons }">
<c:forEach items="${persons}" var="str">
   <div  class="row_1">
	    <div class="col-sm-6">
	 	<ul class="profile_item">
		  <a href="/zzLoveProduct/ShowOthersMessage?id=${str.id}" target="_blank">
		   <li class="profile_item-img">
		   	  <img src="/zzLoveProduct/search/images/Ending/${str.photo}.jpg" class="img-responsive"  style="width:150px;height:200px"/>
		   </li>
		   <li class="profile_item-desc">
		   	  <p>名字:${str.username}</p>
		   	  <p>身高:${str.high}</p>
		   	  <p>生日:${str.date}</p>
		   	  <p>收入情况:${str.income}</p>
		   	  <p>城市:${str.city}</p>
		   	  <h3 style="color:red">热度:${str.heat}</h3>
		   </li>
		   <div class="clearfix"> </div>
		  </a>
	     </ul>
	   </div>
</c:forEach>
</c:if>
  </div>
</div>


		<div class="clearfix"></div>
	</div>
	</div>
	
	
			<div class="clearfix"></div>
			<div class="copy">
				<p>
					Copyright &copy; 2015.Company name All rights reserved.<a
						target="_blank" href="http://www.cssmoban.com/">指针爱情</a>
				</p>
			</div>
		</div>
	</div>
	<!-- FlexSlider -->
	<link href="css/flexslider.css" rel='stylesheet' type='text/css' />
	<script defer src="js/jquery.flexslider.js"></script>
	<!-- FlexSlider -->
</body>
</html>
